<template>
  <div class="comment">
    <van-field name="rate" label="商品评分">
      <template #input>
        <van-rate v-model="rate" />
      </template>
    </van-field>
    <van-field
      v-model="message"
      rows="2"
      autosize
      label="商品评价"
      type="textarea"
      maxlength="50"
      placeholder="请输入评价"
      show-word-limit
    />
    <van-field name="uploader" label="图片上传">
      <template #input>
        <van-uploader v-model="uploader" :after-read="afterRead" />
      </template>
    </van-field>
    <div style="margin: 16px">
      <van-button round block type="info" native-type="submit" @click="onSubmit" color="#ff6a6c"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import { Form, Field, Button, Rate, Uploader,Toast } from "vant";
import API from "@/utils/api.js";
export default {
  name: "Comment",
  data() {
    return {
      rate: 2,
      message: "",
      uploader: [],
    };
  },
  created() {},
  methods: {
    onSubmit() {
      this.$post(API.POST_COMMENT_POST, {
        token: this.$store.state.token,
        orderGoodsId: this.$route.query.id,
        content: this.message,
        star: this.rate,
        hasPicture: '',
        filePath: [],
      }).then((res) => {
        console.log(res);
        this.$router.push("/my");
        Toast.success("评论成功");
      });
    },
    afterRead(file) {
      // console.log(file)
    },
  },
  components: {
    [Field.name]: Field,
    [Form.name]: Form,
    [Button.name]: Button,
    [Rate.name]: Rate,
    [Uploader.name]: Uploader,
    [Toast.name]: Toast
  },
};
</script>

<style lang="less" scoped>
.comment {
  margin-top: 46px;
}
</style>